<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="f" %>
<c:if test="${!ajaxRequest}">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Sun's Family Tree 注册</title>
    
	<link href="<c:url value="/resources/static/ui/global/style/form.css" />" rel="stylesheet"  type="text/css" />  
    <script type="text/javascript" src="<c:url value="/resources/static/js/global/jquery.js" />"></script>
    
    <style type="text/css">
    	.div_login{
    		position:absolute;
    		width:300px;
    		height: 180px; 
    		z-index:1;
    	}
    
    </style>
    
    <script type="text/javascript">
    	var url_register_create = '<c:url value="/register/create"/>';
    	var url_main_page = '<c:url value="/main/page"/>';
    	$(function(){
        	$("#form_register").attr("action",url_register_create);
        	
    		window.onscroll=setCenter;
        	window.onresize=setCenter;
        	window.onload=setCenter;
        	
    	});
    	
    	function setCenter(){
	    	 var div_centerItem=document.getElementById("centerItem");
	    	 div_centerItem.style.top=parseInt(document.documentElement.clientHeight/2+document.documentElement.scrollTop-centerItem.offsetHeight/2)-106+"px";
	    	 div_centerItem.style.left=parseInt(document.documentElement.clientWidth/2+document.documentElement.scrollLeft-centerItem.offsetWidth/2)+"px";
    	}
    	
    	
    </script>
  </head>

  <body>
  </c:if>
  	<div id="centerItem" class="div_login">
	    <h2>Sun's Family Tree 注册</h2>

	<f:form action="" id="form_register" modelAttribute="registerForm" method="post" cssClass="cleanform">
		
		<s:bind path="*">
			<c:if test="${status.error}">
				<div id="error" class="error">填写有误！</div>
				<c:if test="${not empty message}">
					<div id="message" class="${message.type}">${message.text}</div>
				</c:if> 
			</c:if>
		</s:bind> 
	
	    <table width="450px" border="0">
	      <tr>
	        <td style="font-weight:bold;width:100px">账号：</td>
	        <td style="width: 150px"><f:input path="userId" type="text" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="userId" cssClass="error" /></td>        
	      </tr>
	      <tr>
	        <td style="font-weight:bold;width:100px">密码：</td>
	        <td style="width: 150px"><f:input path="password" type="password" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="password" cssClass="error"/></td>
	      </tr>
	       <tr>
	        <td style="font-weight:bold;width:100px">确认密码：</td>
	        <td style="width: 150px"><f:input path="rePassword" type="password" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="rePassword" cssClass="error"/></td>
	      </tr>
	       <tr>
	        <td style="font-weight:bold;width:100px">性别：</td>
	        <td style="width: 150px">
	        	<fieldset class="radio"> 
	        		<label><f:radiobutton path="sex" value="1" />男</label> 
	        		<label><f:radiobutton path="sex" value="0"/>女</label>
        		</fieldset>
        	</td>
	        <td style="text-align: left"></td>
	      </tr>
	       <tr>
	        <td style="font-weight:bold;width:100px">姓名：</td>
	        <td style="width: 150px"><f:input path="realName" type="text" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="realName" cssClass="error"/></td>
	      </tr>
	       <tr>
	        <td style="font-weight:bold;width:100px">Email：</td>
	        <td style="width: 150px"><f:input path="email" type="text" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="email" cssClass="error"/></td>
	      </tr>
	       <tr>
	        <td style="font-weight:bold;width:100px">QQ：</td>
	        <td style="width: 150px"><f:input path="qq" type="text" cssStyle="width:150px"/></td>
	        <td style="text-align: left"><f:errors path="qq" cssClass="error"/></td>
	      </tr>
	      <tr>
	      	<td></td>
	      	<td><input type="submit" value="完成" style="width: 86px"/></td>
	      	<td></td>
	      </tr>
	    </table>
	    </f:form>
	    
	    <script type="text/javascript">
	    	$(function(){
	    		$("#form_register").submit(function() {  
					$.post($(this).attr("action"), $(this).serialize(), function(html) {
						if(html=='success'){
							window.location = url_main_page;
						}else{
							//alert(html);
							$("#centerItem").replaceWith(html);
							$('html, body').animate({ scrollTop: $("#message").offset().top }, 500);
							setCenter();
						}
					});
					return false;  
				});		
	    	});
	    
	    </script>
	    
    </div>
<c:if test="${!ajaxRequest}">
  </body>
</html>
</c:if>
